<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>成易博客-博客</title>

    <link th:replace="common/common :: common-head">
    <div th:replace="common/common :: #common-js"></div>

    <style>
    </style>
</head>
<body style="background: rgba(243,240,240,0.27);padding-top: 70px; ">

    <div th:replace="common/common :: #common-top-nav"></div>


<div id="app" v-cloak>
    <el-container>
        <!--       main 主内容区域     -->
        <el-main>
            <el-row type="flex" class="row-bg" justify="center">

                <el-card class="box-card">
                    <el-row type="flex" class="row-bg" justify="center">
                        <el-form :model="ruleForm" :rules="rules" id="ruleForm" ref="ruleForm" :status-icon="true">

                            <el-row type="flex" class="row-bg" justify="center">
                                <el-col :span="24" :xs="24">
                                    <el-form-item label="博客标题" prop="title">
                                        <el-input v-model="ruleForm.title" placeholder="请输入博客标题"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row type="flex" class="row-bg" justify="center">
                                <el-col :span="24" :xs="24">
                                    <el-form-item label="博客标签" prop="region">
                                        <el-select v-model="ruleForm.region" placeholder="请选择博客标签" filterable="true">
                                            <!--   后期从数据库中获取标签   -->
                                            <el-option label="日记" value="日记"></el-option>
                                            <el-option label="备忘录" value="备忘录"></el-option>
                                            <el-option label="问题" value="问题"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-row type="flex" class="row-bg" justify="center">
                                <el-col :span="24" :xs="24">
                                    <el-form-item label="博客状态" prop="status">
                                        <el-switch v-model="ruleForm.status"></el-switch>
                                        <span v-if="ruleForm.status == false">私密</span>
                                        <span v-if="ruleForm.status == true">公开</span>
                                        <el-button style="float: right;" type="text" @click="showBlogList()" icon="el-icon-edit">博客管理</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>


                            <el-row type="flex" class="row-bg" justify="center">
                                <el-col :span="24" :xs="24">
                                    <el-form-item label="博客内容">
                                    </el-form-item>
                                    <div id="value"></div>
                                </el-col>
                            </el-row>

                            <el-row type="flex" class="row-bg" justify="center">
                                <el-col :offset="8">
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm('ruleForm')">立即发布</el-button>
                                        <el-button @click="resetForm('ruleForm')">重置内容</el-button>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>
                    </el-row>
                </el-card>

            </el-row>
        </el-main>
    </el-container>

</div>

    <script th:src="@{/static/js/blog/blog.js}"></script>

    <div th:replace="common/common :: #common-bottom"></div>
</body>
</html>